<template>
<div class="signin-c">
<div id="signin" >
<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
  <el-form-item label="邮箱" prop="email">
    <el-input v-model="ruleForm2.email"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="pass">
    <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm2')">登录</el-button>
    <el-button @click="resetForm('ruleForm2')">重新输入</el-button>
  </el-form-item>
</el-form>
</div>
</div>
</template>

<script>
import axios from 'axios'
import store from './vuex/store'
import VueRouter from 'vue-router'

const myApi = axios.create({
  baseURL: 'http://localhost:8081/api',
  withCredentials: true,
  headers: {
    'Accept' : 'application/json',
    'Content-Type': 'application/json',
  }
});

  export default {
    data() {
      var checkEmail = (rule, value, callback) => {
          if (!value) {
          return callback(new Error('邮箱不能为空'));
          }else{
              callback();
          }
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
              callback();
        }
      };
      return {
        ruleForm2: {
          pass: '',
          email: '',
        },
        rules2: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          email: [
            { validator: checkEmail, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        var thisVue = this;
        myApi.get('/login',{
                    params: {
                        email: this.ruleForm2.email, 
                        password: this.ruleForm2.pass
                    }
                })
                .then(function (response) {
                    console.log(response);
                    //这边做登录操作，然后登录成功后把个人信息暂存vuex
                    thisVue.$store.dispatch('addMyInfo' , { 
                      'email' : thisVue.ruleForm2.email , 
                      'password' : thisVue.ruleForm2.pass
                      });
                    thisVue.$store.dispatch('showLogin' , true);
                    
                    var thisVue2 = thisVue;
                    myApi.get('/userinfo')
                .then(function (response) {
                    console.log(response);
                    thisVue2.$store.dispatch('showuserinfo' , { 
                      'uid' : response.data.message.uid , 
                      'username' : response.data.message.username ,
                      'email' :response.data.message.email ,
                      'emailstatus' :response.data.message.emailstatus ,
                      'status' :response.data.message.status ,
                      'exp' :response.data.message.exp,
                      'gold' :response.data.message.gold
                      });
                })
                .catch(function (error) {
                    console.log(error);
                });
          thisVue.$router.push('/');

                })
                .catch(function (error) {
                    console.log(error);
                });

        myApi.get('/userinfo')
                .then(function (response) {
                    console.log(response);
                    thisVue.$store.dispatch('showuserinfo' , { 
                      'uid' : response.data.message.uid , 
                      'username' : response.data.message.username ,
                      'email' :response.data.message.email ,
                      'emailstatus' :response.data.message.emailstatus ,
                      'status' :response.data.message.status ,
                      'exp' :response.data.message.exp,
                      'gold' :response.data.message.gold
                      });
                      //console.log(thisVue.$store.state.userinfo.uid);
                })
                .catch(function (error) {
                    console.log(error);
                });

          thisVue.$router.push('/');
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style>
.signin-c{
    margin-top:30px;
    width: 350px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
}
</style>